<template>
  <gg-form-item :label="label" :message="message" :messageDisplay="messageDisplay" :labelWidth="localLabelWidth" :layout="localLayout" :isIcon="true"
    :iconTop="iconTop">
    <view class="gg-picker">
      <picker class="gg-picker-item" mode="multiSelector" :range="range_data" range-key="text" :value="items_index" @change="bindPickerChange"
        @columnchange="bindPickerColumnchange" @cancel="onCancel" @click="changeIconTop">
        <view class="gg-picker-item-text"
          v-if="last_range_data[0]&&lastRetDataIndex[0]&&last_range_data[1]&&lastRetDataIndex[1]&&last_range_data[2]&&lastRetDataIndex[2]">
          {{last_range_data[0][lastRetDataIndex[0]].text||''}}
          {{joint||' '}}
          {{last_range_data[1][lastRetDataIndex[1]].text||''}}
          {{joint||' '}}
          {{last_range_data[2][lastRetDataIndex[2]].text||''}}
        </view>
        <view class="gg-picker-item-placeholder" v-else>{{placeholder}}</view>
      </picker>
    </view>
  </gg-form-item>
</template>

<script>
import MixinsPicker from '../mixins/mixins-picker.js';
export default {
  mixins: [MixinsPicker],
  name: "GgPicker3",
  props: {
    //默认输入框内容
    value: {
      type: Array,
      default: () => { }
    },
    dataType: {
      type: String,
      default: 'value'
    },
    //选项数组
    dataLists: {
      type: [Array, String],
      default: []
    },
    //选项数组的网络请求地址，用于获取dataLists但优先级高于dataLists
    dataUrl: {
      type: String,
      default: ''
    },
    //数据类型value的名称
    dataValue: {
      type: String,
      default: 'value'
    },
    //数据类型text的名称
    dataText: {
      type: String,
      default: 'text'
    },
    free: {
      type: String,
      default: 'free'
    },
    joint: {
      type: String,
      default: ''
    }
  },
  watch: {
    dataLists: {
      handler(newValue) {
        this.itemsSortOut();
      },
      deep: true
    },
    value(newVal) {
      this.localVal = newVal;
      this.itemsSortOut();
    },
  },
  data() {
    return {
      iconTop: false,
      localVal: '',
      items: [],//全部数据
      range_data: [],//弹窗临时数组
      last_range_data: [],//最终显示页面数组
      items_sub: [],
      items_sub2: [],
      items_index: [0, 0, 0],//当前下标
      lastRetDataIndex: [0, 0, 0],// 最终确定选中的下标
      localDataType: ''
    };
  },
  created: function () {
    this.localVal = this.value;
    this.localDataType = this.dataType != 'text' ? 'value' : 'text';
    this.itemsSortOut();

  },
  methods: {
    itemsSortOut: function () {
      let original = [];
      if (this.dataUrl) {
        //网络请求
        if (typeof this.dataUrl == 'function') {
          this.dataUrl({}).then((successRes) => {
            original = successRes.data;
          });
        } else {
          console.warn('此处需要自定义请求方法');
        }
      } else {
        original = this.dataLists;
      }
      if (typeof original == 'string') {
        original = JSON.parse(original);
      }
      if (!original) {
        return;
      }
      //整理数据
      let items = [];
      let dataValue = this.dataValue ? this.dataValue : 'value';
      let dataText = this.dataText ? this.dataText : 'text';
      let free = this.free;
      let items_index = this.items_index;
      let dataType = this.localDataType;
      for (let i in original) {
        let data = original[i];
        //查找一级绑定参数

        if (this.localVal.length >= 1) {
          if (dataType == 'text' && this.localVal[0] == data[dataText]) {
            items_index[0] = i
          } else if (dataType == 'value' && this.localVal[0] == data[dataValue]) {
            items_index[0] = i
          }
        }

        items.push({
          value: data[dataValue].toString(),
          text: data[dataText]
        })
        if (original[i][free]) {
          let free_data = original[i][free];
          let temp = [];
          for (const ii in free_data) {
            let data = free_data[ii]

            //查找二级绑定参数
            if (this.localVal.length >= 2) {
              if (dataType == 'text' && this.localVal[1] == data[dataText]) {
                items_index[1] = ii
              } else if (dataType == 'value' && this.localVal[1] == data[dataValue]) {
                items_index[1] = ii

              }
            }
            temp.push({
              value: data[dataValue].toString(),
              text: data[dataText]
            })

            if (free_data[ii][free]) {
              let free_data2 = free_data[ii][free];
              let temp2 = [];
              for (const iii in free_data2) {
                let data = free_data2[iii]
                //查找三级绑定参数
                if (this.localVal.length >= 3) {
                  if (dataType == 'text' && this.localVal[2] == data[dataText]) {
                    items_index[2] = iii
                  } else if (dataType == 'value' && this.localVal[2] == data[dataValue]) {
                    items_index[2] = iii
                  }
                }

                temp2.push({
                  value: data[dataValue].toString(),
                  text: data[dataText]
                })
              }
              temp[ii].free = temp2;
            }
          }
          items[i].free = temp;
        }
      }
      if (!items) {
        return;
      }
      //默认Value
      this.items = items;
      this.items_sub = items[items_index[0] ?? 0].free;
      this.items_sub2 = this.items_sub[items_index[1] ?? 0].free;
      this.range_data = [items, this.items_sub, this.items_sub2];
      this.items_index = items_index;
      this.last_range_data = [...this.range_data];
      if (this.value.length == 3) {
        this.lastRetDataIndex = [...this.items_index];
      }
    },
    bindPickerChange: function (e) {
      let items_index = e.detail.value;
      this.items_index = items_index;
      this.updatelocalVal();
      this.iconTop = false
    },
    /* 取消选择 */
    onCancel(e) {
      this.iconTop = false
      this.range_data = [...this.last_range_data];
      this.items_index = [...this.lastRetDataIndex];
    },
    bindPickerColumnchange: function (e) {
      let items_index = [...this.items_index]
      let range_data = [...this.range_data];
      if (e.detail.column == 2) {
        //滑动三级
        items_index[2] = e.detail.value;
      } else if (e.detail.column == 1) {
        //滑动二级
        items_index[1] = e.detail.value;
        items_index[2] = 0;
        range_data[2] = range_data[1][items_index[1]].free || [];
        // this.range_data = range_data;

      } else if (e.detail.column == 0) {
        //滑动一级
        items_index[0] = e.detail.value;
        items_index[1] = 0;
        items_index[2] = 0;
        range_data[1] = range_data[0][items_index[0]].free || [];
        range_data[2] = range_data[1][items_index[1]].free || [];
        // this.range_data = range_data;
      }
      this.$set(this, 'range_data', range_data)
      console.log(range_data);
      // this.items_index = items_index;
      this.$set(this, 'items_index', items_index)
      this.$forceUpdate()
      // this.updateInput();
    },
    updatelocalVal() {
      let items_index = this.items_index;
      this.last_range_data = [...this.range_data];
      this.lastRetDataIndex = [...items_index];
      let value = [];
      let items = this.items;
      if (this.dataType == 'text') {
        value[0] = items[items_index[0]].text;
        value[1] = items[items_index[0]].free[items_index[1]].text;
        value[2] = items[items_index[0]].free[items_index[1]].free[items_index[2]].text;
      } else {
        value[0] = items[items_index[0]].value;
        value[1] = items[items_index[0]].free[items_index[1]].value;
        value[2] = items[items_index[0]].free[items_index[1]].free[items_index[2]].value;
      }
      this.$emit('input', value);
    }
  }
};
</script>

<style>
.gg-picker {
  min-height: 35px;
}
.gg-picker-item {
  height: 35px;
  line-height: 35px;
  float: left;
  margin-right: 10px;
  width: 100%;
}
.gg-picker-item-placeholder {
  color: grey;
}
</style>